import {WidgetClass} from "./widget";
import {WidgetFactory} from "@/modules/IDE/widgetFactory";

export class WidgetGridView extends WidgetClass {
  constructor(options = {}) {
    super(options);
    const {ports, UI} = options
    if (UI) {
      this.UI.data = UI.data;
    } else {
      this.UI.data = {
        scrollDirection: 'vertical',
        crossAxisCount: 2,//表示纵轴的元素个数
        mainAxisSpacing: 10,//表示主轴item的间距
        crossAxisSpacing: 20,//表示纵轴item的间距
        listCell: {}
      };
      this.initTab(options);
    }
    if (ports) {
      this.ports = ports;
    } else {
      this.ports = this.assembleDefaultPorts();
    }
  }

  initTab(option = {}) {
    const lastContainer = WidgetFactory.createListCell({
      roomId: this.roomId,
      componentId: this.componentId,
      subPageId: this.subPageId,
      backStyle: {backgroundColor: 'bg-color-container', borderRadius: {width: 8}},
      rect: {top: 15, left: 15, width: 200, height: 138},
      syncToFactory: option.syncToFactory,
      name: '列表视图item'
    });
    WidgetFactory.widgetAppendChild(this, lastContainer);
  }

  assembleDefaultPorts() {
    const superState = super.assembleDefaultPorts();
    return {
      values: [
        ...superState.values,
        {
          name: "数据源",
          key: "listData",
          type: "string",
          value: null,
        },
        {
          name: "子元素个数",
          key: "dataLen",
          type: "int",
          value: null,
        },
      ],
      events: [
        ...superState.events,
        {
          name: "值改变事件",
          key: `valueChange-${this.id}`,
          eventType: "valueChange",
          type: "event",
          action: [],
        }
      ],
    };
  }
}
